import React,{Component} from "react";
import {Text,StyleSheet} from 'react-native'
import IndexA1 from './indexA_1'
import IndexA2 from './indexA_2'
import IndexA3 from './indexA_3'
import IndexA4 from './indexA_4'
import ScrollableTabView, {DefaultTabBar,ScrollableTabBar } from 'react-native-scrollable-tab-view';


export default class ScrollTabs extends Component {
    static navigationOptions = {
        title:"首页",
        headerStyle: {
            backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    };
    constructor(props){
        super(props);
        console.log("screen IndexA.js->props:",props);
    }
    render(){

        return (
            <ScrollableTabView
            style={styles.scrollBox}
            tabBarUnderlineStyle={{height: 2,backgroundColor: '#FF0000',}} 
            tabBarBackgroundColor='#fff'
            tabBarActiveTextColor='#b4282d'
            tabBarInactiveTextColor='#b4282d'
            locked= {false} //(Bool，默认为false) 是否允许拖动
            //page={1}        //设置选中的page
            initialPage={0}
            renderTabBar={() => <ScrollableTabBar />} 
            onChangeTab={(obj)=>{
                //console.log("changing",obj);
            }} 
            onScroll={
                (postion) => {  
                // float类型 [0, tab数量-1]  
                console.log('scroll position:',postion);
              }
            }
            >
            <IndexA1  tabLabel='Tab IndexA_1' >IndexA_1</IndexA1>
            <IndexA2  tabLabel='Tab IndexA_2' >IndexA_2</IndexA2>
            <IndexA3  tabLabel='Tab IndexA_3' >IndexA_3</IndexA3>
            <IndexA4  tabLabel='Tab IndexA_4' >IndexA_4</IndexA4>
            </ScrollableTabView>
        )
    }
}

const styles = StyleSheet.create({
    scrollBox:{
        paddingTop:0,
        backgroundColor:'#ffffff',
    }
})


// const mapStateToProps = (state, ownProps) => {
//     return {
//         prop: state.prop
//     }
// }

// const mapDispatchToProps = (dispatch, ownProps) => {
//     return {
//         dispatch1: () => {
//             dispatch(actionCreator)
//         }
//     }
// }


// export default connect(mapStateToProps, mapDispatchToProps)(ScrollTabs);

// import React,{Component} from "react";
// import {
//     View,
//     Text,
//     Button,
//     StyleSheet
// } from "react-native";

// import {
//     createBottomTabNavigator,
//     createStackNavigator,
//     //createDrawerNavigator,
// } from 'react-navigation';

// export default class IndexA extends Component {

//     static navigationOptions = {
//         title:"首页",
//         headerStyle: {
//             backgroundColor: '#f4511e',
//         },
//         headerTintColor: '#fff',
//         headerTitleStyle: {
//             fontWeight: 'bold',
//         },
//     };

//     constructor(props){
//         super(props);
//         console.log("indexA props:",props);
//     }

//     render(){
//         return (
//             <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
//                 <Text style={{fontSize:20,textAlign:"center",color:"red"}}>
//                     IndexA
//                 </Text>
//             </View>
//         )
//     }

// }